<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Backgrounds WebUI 2.0</title>
<!--[if lt IE 9]>
      <script src="js/html5.js"></script>
    <![endif]-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/prettify.css" rel="stylesheet" type="text/css">
<link href="css/webui.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#bgList{
		margin:0;
		padding: 0;
	}
	#bgList li{
		list-style: none;
		float:left;
		border: 1px solid #ccc;
		margin:10px 5px;
		height:42px;
		width: 42px;
		cursor: pointer;
	}
</style>
</head>
<body style="padding-top:50px;"  >
	<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          
          <a class="brand" href="http://code.google.com/webui-framework">WebUI FrameWork</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="index.html">OverView</a></li>
              <li><a href="menus.html">Menus</a></li>
              <li><a href="lists.html">Lists</a></li>
              <li><a href="colors.html">Colors</a></li>
              <li><a href="forms.html">Forms</a></li>
              <li><a href="buttons.html">Tables</a></li>
              <li class="divider-vertical"></li>
              <li><a href="wedgits.html">Wedgits</a></li>
              
            </ul>
            <ul class="nav pull-right">
            	<li><a href="#">WelCome WebUI</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    
  <div class="container" > 
  	  <section class="row margin20-b" id="breadcrumbMain">
      		<div class="span12">
                <div class="panel panel-small panel-bordered">
                	<header><h2>选择背景</h2></header>
                	<div class="pcontent">
                		<ul id="bgList">
                			<li class="bg-white" title="bg-white">&nbsp;</li>
                			<li class="bg-gray" title="bg-gray">&nbsp;</li>
                			<li class="bg-black" title="bg-black">&nbsp;</li>
                			<li class="bg-wood" title="bg-wood">&nbsp;</li>
                			<li class="bg-wood-lighter" title="bg-wood-lighter">&nbsp;</li> 
                			<li class="bg-wood-gray" title="bg-wood-gray">&nbsp;</li> 
                			<li class="bg-noise" title="bg-noise">&nbsp;</li>
                			<li class="bg-noise-darker" title="bg-noise">&nbsp;</li>
                			<li class="bg-noise-yeallow" title="bg-noise-yeallow">&nbsp;</li>
                			<li class="bg-noise-blue" title="bg-noise-blue">&nbsp;</li>
                			<li class="bg-noise-gradient" title="bg-noise-gradient">&nbsp;</li>
                			<li class="bg-silver" title="bg-silver">&nbsp;</li>
                			<li class="bg-silver-anti" title="bg-silver-anti">&nbsp;</li>
                			<li class="bg-mac" title="bg-mac">&nbsp;</li>
                			<li class="bg-mac-darker" title="bg-mac-darker">&nbsp;</li>
                			<li class="bg-mac-black" title="bg-mac-black">&nbsp;</li>
                			<li class="bg-leather" title="bg-leather">&nbsp;</li>
                			<li class="bg-wall" title="bg-wall">&nbsp;</li>
                			<li class="bg-block" title="bg-block">&nbsp;</li>
                		</ul>
                		<div class="clearfix"></div>
                	</div>
                </div>
        	</div>
       </section>
       
      <section id="normalPanels" class="bg-block margin20-b rounded">
     	 <div class="row pad20-tb ">
        	<div class="span3 offset1">	
                <div class="panel panel-large panel-bordered">
                	<header><h2> 大型面板</h2></header>
                    <div class="pcontent">
                    	<ul class="vlist">
                            <li><a href="#">Documentation</a></li>
                            <li><a href="#">Plugins</a></li>
                            <li><a href="#">Suggest</a></li>
                            <li><a href="#">Support Forum</a></li>
                            <li><a href="#">Themes</a></li>
                            <li><a href="#">WordPress Blog</a></li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
            <div class="span4">	
                <div class="panel panel-bordered">
                	<header>
                    	<a href="#" class="btn btn-alpha pull-right"><i class="icon-plus"></i>添加</a>
                        <h2>面板<small> &nbsp;描述信息...</small></h2>
                    	
                    </header>
                    <div class="pcontent">
                    	<ul class="list">
                            <li><a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb3-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb4-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb3-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb4-small.jpg"/></a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    
                </div>
            </div>
            
            <div class="span3">	
                <div class="panel panel-small panel-bordered shadowed-large margin10-b bg-gray">
                	<header>
                    
                    	<div class="pull-right btn-group"> 
                            <a href="#" class="btn btn-alpha"><i class="icon-plus"></i></a>
                            <a href="#" class="btn btn-alpha"><i class="icon-print"></i></a>
                        </div>
                    	<h2><i class="icon-heart"></i> 小型面板</h2>
                    
                    </header>
                    <div class="pcontent ">
                    	<ul class="vlist">
                            <li>
                                <a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg" /></a> 
                                <div class="text">
                                    <h5><a href="#">Show me the meaning of Being Longly</a> </h5>
                                    <p>2011年12月 by Sind</p>
                                </div>
                               <div class="clearfix"></div>
                            </li>
                        </ul>
                    </div>
                    <footer>
                    	<a href="#" class="btn btn-alpha pull-right">按钮</a><a href="#" class="btn btn-alpha pull-right">查找</a>
                    </footer>
                </div>
                
                <div class="panel panel-mini shadowed-large  panel-bordered  margin10-b bg-silver">
	                	 <header>
	                    	<i class="icon-info-sign pull-right"></i>
	                    	<h2>迷你面板</h2>		                    
	                     </header>
	                    <div class="pcontent">
	                    	<ul class="vlist ">
                            <li>
                                <a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg" /></a> 
                                <div class="text">
                                    <h5><a href="#">Show me the meaning of Being Longly</a> </h5>
                                    <p>2011年12月 by Sind</p>
                                </div>
                               <div class="clearfix"></div>
                            </li>
                        </ul>
	                    </div>	
                 </div>
                
                
            </div>
            
            
        
        
        
        </div>
        
        <div class="row pad20-tb">
        	<div class="span3 offset1">	
                <div class="panel panel-glass  margin10-b">
                	<header>
                    	<a href="#" class="btn btn-alpha pull-right"><i class="icon-plus icon-white"></i></a>
                        <h2><i class="icon-heart icon-white"></i> 黑色面板</h2>
                    </header>
                    <div class="pcontent">
                    	<ul class="vlist vlist-white" >
                            <li><i  class="icon-book icon-white"></i> <a href="#">Documentation</a></li>
                            <li><i  class="icon-asterisk icon-white"></i> <a href="#">Plugins</a></li>
                            <li><i  class="icon-edit icon-white"></i> <a href="#">Suggest</a></li>
                        </ul>
                    </div>
                    
                </div>
                <div class="panel panel-darker panel-small">
                	
                    <div class="pcontent bg-black rounded">
                    	<ul class="vlist vlist-white">
                            <li>
                                <a href="#" class="thumb"><img src="img/demo/thumb4-small.jpg" /></a> 
                                <div class="text">
                                    <h5><a href="#">Show me the meaning of Being Longly</a> </h5>
                                    <p>2011年12月 by Sind</p>
                                </div>
                               <div class="clearfix"></div>
                            </li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            
             <div class="span4">
        			<div class="panel panel-darker   margin10-b shadowed-large">
	                	<header>
	                    	<a href="#" class="btn btn-alpha pull-right"><i class="icon-plus-sign icon-white"></i> 添加</a>
	                        <h2><i class="icon-heart icon-white"></i> 黑色面板</h2>
	                    </header>
	                    <div class="pcontent">
	                    	<ul class="vlist" >
	                            <li><i  class="icon-book "></i> <a href="#">Documentation</a></li>
	                            <li><i  class="icon-asterisk "></i> <a href="#">Plugins</a></li>
	                            <li><i  class="icon-edit "></i> <a href="#">Suggest</a></li>
	                        </ul>
	                    </div>	
                    
                	</div>
       		 </div>
       		 
       		 <div class="span3">
        		<div class="panel panel-mini panel-darker ">
                	<header>
	                    	<i class="icon-info-sign icon-white pull-right"></i>                    
	                </header>
                    <div class="pcontent bg-black">
                    	<ul class="list">
                            <li><a href="#" class="thumb"><img src="img/demo/thumb1-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb5-small.jpg"/></a></li>
                            <li><a href="#" class="thumb"><img src="img/demo/thumb3-small.jpg"/></a></li>
                        </ul>
                         
                    </div>
                    
                </div>
       		 </div>
        </div>
     </section>
    <footer style="margin:40px 0 50px 0;padding:20px 0;border-top:1px solid #e5e5e5;">
    	<p class="pull-right"><a href="#">返回顶端</a></p>
        <p><a href="http://code.google.com/webui-framework">WebUI Framework 2.0</a> Designed For Developers Thanks For Twitter Bootstrap Framework </p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a></p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
    </footer>
    
    
  </div>   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/prettify.js"></script>

    
    <script type="text/javascript">
    	
		$(function(){
			$("#bgList li").click(function(){
				var className = $(this).attr("class");
				$("#normalPanels").removeClass().addClass(className + "  margin20-b rounded");
			});
		});
    
    </script>
    
</body>
</html>
 